<template>
	<view>
		<view v-if="InfouSerLevel === '5'|| !InfouSerLevel|| InfouSerLevel === '6'" class="qx-style"> 暂无权限 </view>
		<view class="cont" v-else>
			<view class="transaction-date-container">
				<view class="item">
					<button :class="{ active: dateType === 'today' }" type="default" size="mini"
						@click="getDate('today')">今日</button>
				</view>
				<view class="item">
					<button :class="{ active: dateType === 'yesterday' }" type="default" size="mini"
						@click="getDate('yesterday')">昨日</button>
				</view>
				<view class="item">
					<button :class="{ active: dateType === 'lastweek' }" type="default" size="mini"
						@click="getDate('lastweek')">近一周</button>
				</view>
				<view class="item">
					<button :class="{ active: dateType === 'pastmonth' }" type="default" size="mini"
						@click="getDate('pastmonth')">近一月</button>
				</view>
				<view class="item">
					<button :class="{ active: dateType === 'custom' }" type="default" size="mini"
						@click="getDate('custom')">自定义</button>
				</view>
			</view>
			<view style="margin: 10upx 30upx;" v-show="dateType === 'custom'">
				<uni-datetime-picker @change="customChange" ref="datetimeRange" v-model="datetimerange"
					type="datetimerange" rangeSeparator="至" />
			</view>
			<view class="list-container">
				<view class="list-item" v-for="(item, index) in list" :key="index">
					<view class="item-img">
						<!-- <image src="../../static/down.png"></image> -->
						<u-qrcode ref="qr" canvas-id="qr" value="智慧油站报表" size="100"></u-qrcode>
					</view>
					<view class="item-box">
						<view class="item-left">
							<view class="username">{{ item.oilPersonnelName }}</view>
							<view class="common_modle">
								<view class="common_name">扫码次数:<text>{{item.count||0}}</text></view>
								<view	view class="common_name">支付金额:<text>{{ item.total ? item.total : 0 }}元</text></view>
							</view>
						</view>
						<view class="item-right">
							<view class="detail" @click="goDetail(item)">查看详情</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="isLoadding">
				<uni-load-more iconType="circle" :status="status" />
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getPayOrderEmployee
	}
	from '@/common/yftx-api.js';
	import store from "@/store";
	import {
		getUserInfo
	} from "@/util/info.js"

	export default {
		data() {
			return {
				InfouSerLevel: '',
				list: [],
				isLoadding: false,
				status: 'more',
				dateType: 'today',
				dateList: [],
				queryData: {
					pageNum: 1,
					pageSize: 10,
					beginTime: '',
					endTime: '',
					enterpriseId: store.state.enterpriseId
				},
				datetimerange: []
			}
		},

		methods: {
			goDetail(item) {
				if (this.dateType != 'custom') {
					item.beginTime = this.dateList[0]
					item.endTime = this.dateList[1]
				} else {
					item.beginTime = this.datetimerange[0]
					item.endTime = this.datetimerange[1]
				}
				uni.navigateTo({
					url: './transaction-detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			getDate(type) {
				this.dateType = type
				this.queryData.pageNum = 1
				this.list = []
				if (type != 'custom') {
					// 近一周包含今日往前推6天
					// 近一月包含今日往前推29天
					// this.datetimerange = []
					let date = new Date();
					switch (type) {
						case 'today':
							this.dateList = this.getDateRange(date, 0, false)
							break;
						case 'yesterday':
							this.dateList = this.getDateRange(date, 1, true)
							break;
						case 'lastweek':
							this.dateList = this.getDateRange(date, 6, false)
							break;
						case 'pastmonth':
							this.dateList = this.getDateRange(date, 29, false)
							break;
					}
					this.queryData.beginTime = this.dateList[0]
					this.queryData.endTime = this.dateList[1]
					this.getData()
				} else {
					this.queryData.beginTime = this.datetimerange[0]
					this.queryData.endTime = this.datetimerange[1]
					this.getData()
					// this.$refs.datetimeRange.show()
				}
			},
			customChange(arr) {
				this.queryData.beginTime = arr[0]
				this.queryData.endTime = arr[1]
				this.queryData.pageNum = 1
				this.list = []
				this.getData()
			},
			getData() {
				this.isLoadding = true
				this.status = 'loading'
				getPayOrderEmployee(this.queryData).then(res => {
					if (res && res.code === 200) {
						if (res.rows && res.rows.length > 0) {
							res.rows.forEach(item => {
								this.list.push(item)
							})
							if (this.list.length >= 5) {
								this.status = 'more'
							} else {
								this.status = 'noMore'
							}
						} else {
							this.status = 'noMore'
						}
					} else {
						this.list = []
						this.status = 'noMore'
					}
					// this.isLoadding = false
				})
			},
			getDateRange(dateNow, intervalDays, yesterday) {
				let oneDayTime = 24 * 60 * 60 * 1000;
				let list = [];
				let lastDay;
				lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
				if (yesterday) {
					list.push(this.formateDate(lastDay, false));
					list.push(this.formateDate(lastDay, true));
				} else {
					list.push(this.formateDate(lastDay, false));
					list.push(this.formateDate(dateNow, true));
				}
				return list;
			},
			formateDate(time, isEnd) {
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let day = time.getDate();
				let timer = '00:00:00'
				if (isEnd) {
					timer = '23:59:59'
				}

				if (month < 10) {
					month = "0" + month;
				}

				if (day < 10) {
					day = "0" + day;
				}

				return year + "-" + month + "-" + day + " " + timer
			},

			// 获取用户等级
			async getUserInfouSerLevel() {
				const level = await getUserInfo("userLevel")
				this.InfouSerLevel = level
			}

		},
		onShow() {
			this.getUserInfouSerLevel()
			if (this.dateType === 'custom') {
				this.getDate(this.dateType)
			} else {
				const dateType = uni.getStorageSync('logout')
				if (dateType) {
					this.dateType = dateType
					uni.removeStorageSync('logout');
				}
				this.getDate(this.dateType)
			}
		},
		onReachBottom() {
			this.queryData.pageNum++
			this.getData()
		}
	}
</script>
<style lang="scss">
	.qx-style {
		width: 70px;
		// background-color: #fb6703;
		transform: translateX(-35px);
		margin-top: 80px;
		margin-left: 50%;
	}

	.cont {
		// background-color: #f5f5f5;
		box-sizing: border-box;

		.u-navbar {
			.u-icon {
				display: none;
			}
		}

		.uni-card__content {
			display: none;
		}

		.transaction-date-container {
			width: 100%;
			overflow-y: auto;
			box-sizing: border-box;
			white-space: nowrap;
			padding: 10upx 20upx 0 20upx;

			.item {
				display: inline-block;
				margin-left: 20upx;
			}
		}

		.list-container {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20upx;
			margin-top: 20upx;

			.list-item {
				height: 200upx;
				display: flex;
				flex-direction: row;
				padding: 10upx;
				border: 1px solid #ebeef5;
				border-radius: 20upx;
				box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
				margin-bottom: 20upx;

				.item-img {
					flex: 2;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-box {
					flex: 5;
					display: flex;
					flex-direction: row;

					.item-left {
						flex: 1;
						display: flex;
						flex-direction: column;
						padding-left: 40rpx;

						.username {
							display: flex;
							align-items: start;
						}
						.common_modle{ 
							margin-top: 30rpx;
							.common_name{ 
								font-size: 14px;
								display: flex;
								align-items: start;
							}
							.common_name:last-child {
								margin-top: 10rpx;
								display: flex;
								align-items: start;
								text{ 
									padding-left: 10rpx;
									color: #fb6703;
								}
							}
						}
						
					}

					.item-right {
						//flex: 1;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						margin-right: 20upx;

						.detail {
							background-color: #fb6703;
							color: #fff;
							padding: 5upx 20upx;
							border-radius: 20upx;
							font-size: 29upx;
						}
					}
				}
			}
		}
	}

	.active {
		background-color: #fb6703 !important;
		color: #fff !important;
	}
</style>